<script setup lang="ts">
import GoodTitle from '../../../components/GoodTitle.vue'

defineProps<{
  goodName: string,
  backgroundColor: string,
  goodInfo: string,
  fontColor: string,
  imgSrc: string
}>()
</script>

<template>
  <div class="homecontainer" :style="{ backgroundColor: backgroundColor }">
    <GoodTitle :goodName="goodName" :goodInfo="goodInfo" :fontColor="fontColor" />
    <img :src="imgSrc" alt="iphonese">
  </div>
</template>

<style scoped lang="less">
.homecontainer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  padding-top: 10%;
  margin-bottom: 16px;

  img {
    width: 100%;
    max-width: 750px;
    object-fit: cover;
  }
}
</style>
